<template>
	<div class="boxStyle">
		<el-row type="flex" class="row-bg" justify="start" style="margin-bottom: 10px;">
			<el-col :span="1" style="margin-top: 5px;padding-left: 10px;">查询</el-col>
			<el-col :span="4.5">
				<el-button size="small" type="primary" @click="t_search(6)">最近7天</el-button>
				<el-button size="small" type="primary" @click="t_search(29)">最近30天</el-button>
			</el-col>
			<el-col :span="1" style="margin-top: 5px;padding-left: 15px;">时间:</el-col>
			<el-col :span="8">
				<el-date-picker v-model="stime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
				<el-button style="margin-top: 5px;" type="warning" size="small" @click="search" icon="el-icon-search">查找</el-button>
			</el-col>
			<el-col :span="4">
				<el-button size="small" type="primary" @click="showZX">折线图</el-button>
				<el-button size="small" type="primary" @click="showZZ">柱状图</el-button>
			</el-col>
			<el-col :span="1">
				<el-button type="warning" size="small" @click="FlowExcel">导出数据</el-button>
			</el-col>
		</el-row>
		<template>
			<div v-show="isc" :class="className" :style="{height:height,width:c_width}" ref="myEchart"></div>
		</template>
		<template>
			<div v-show="!isc" :class="className" :style="{height:height,width:c_width}" ref="myEchart2"></div>
		</template>
		<el-table ref="multipleTable" stripe border :data="tableLists" tooltip-effect="dark" style="margin-bottom: 10px;width: 100%">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="createTime" label="日期" width="280" :formatter="dateFormat"></el-table-column>
			<el-table-column prop="newNum" label="新增订单" width="200"></el-table-column>
			<el-table-column prop="payNum" label="付款订单" width="200"></el-table-column>
			<el-table-column prop="amountPrice" label="订单总额" width="200"></el-table-column>
			<el-table-column prop="payPrice" label="付款总额" width="200"></el-table-column>
			<el-table-column prop="unitPrice" label="客单价" width="200"></el-table-column>
			<el-table-column prop="refundNum" label="退款订单数" width="200"></el-table-column>
			<el-table-column prop="refundPrice" label="退款总额" width="200"></el-table-column>
		</el-table>
		<el-pagination background @current-change="handleCurrentChange" :current-page="currentPage1" :page-size="size" layout="prev, pager, next,total, slot" :total="totals">
			<span style="margin-top: -2px;color: #606266;font-weight: 100;">第<el-input type="text" v-model="inputPage" style="width: 60px;margin: 0 5px;"/>页<el-button size="mini" style="background: #409EFF; color: #fff;margin:0 5px;" @click="handleCurrentChange(inputPage)">跳转</el-button><span>总计{{totalPage}}页</span></span>
		</el-pagination>

	</div>
</template>

<script>
	import { formatDate } from 'static/js/date.js'
	import axios from "axios"
	import qs from "qs"
	import { NAMENOT_NULL } from "static/js/rules.js"
	import echarts from 'echarts'
	export default {
		props: {
			className: {
				type: String,
				default: 'yourClassName'
			},
			width: {
				type: String,
				default: "100%"
			},
			height: {
				type: String,
				default: '300px'
			}
		},
		data() {
			return {
				c_width: "1631px",
				tbList: [],
				orderState: '0',
				selectArr: [],
				tableLists: [],
				isc: true,
				currentPage1: 1, //当前页
				totals: 0, //分页总条数
				size: 0, //每页条数
				totalPage: 0, //总页数
				purl: this.$store.state.home.purl, //权限数组
				sDate: "",
				eDate: "",
				id: "",
				stime: [],
				rules: {
					udicName: NAMENOT_NULL
				},
				inputPage: 1
			}
		},
		activated() {
			this.sName = ""; //查找名称
			this.sVal = ""; //查找类别
			this.stime=[];
			var mytime = new Date();
			var st = mytime.setDate(mytime.getDate() - 6);
			st = new Date(st);
			st = formatDate(st, 'yyyy-MM-dd');
			var et = formatDate(new Date(), 'yyyy-MM-dd');
			this.load(1, st, et);
			this.currentPage1 = 1;
			this.addShow = this.purl[0].findIndex((val) => val === "/interface/dictionary/create") //判断是否拥有增加权限
			this.updateShow = this.purl[0].findIndex((val) => val === "/interface/dictionary/update") //判断是否拥有更新权限
		},
		methods: {
			load(num, st, et) {
				this.sDate = st;
				this.eDate = et;
				console.log(st + "||" + et);
				axios.get("interface/count/dayPaper?pageNo=" + num + "&startDate=" + st + "&endDate=" + et).then((res) => {
					this.tbList = res.data.data.list; //list数据
					this.tableLists = res.data.data.pageList; //list数据
					this.options = res.data.data.dicttype; //类别
					this.totals = res.data.data.pageBean.totalRow; //总条数
					this.size = res.data.data.pageBean.pageSize; //每页条数
					this.totalPage = res.data.data.pageBean.totalPage; //总页数
					this.chart = echarts.init(this.$refs.myEchart);
					this.chart2 = echarts.init(this.$refs.myEchart2);
					var xTime = [];
					var addsNum = [];
					var payNum = [];
					var dw = "";
					var strName = "";
					console.log(this.tbList)
					for(var i = 0; i < this.tbList.length; i++) {
						var stime = new Date(this.tbList[i].createTime)
						xTime.push(formatDate(stime, 'MM-dd'));
						addsNum.push(this.tbList[i].newNum)
						payNum.push(this.tbList[i].payNum)
					}
					console.log(xTime);
					this.chart.setOption({
						title: {
							text: '销售日报'
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								label: {
									backgroundColor: '#6a7985'
								}
							}
						},
						legend: {
							data: ['销售日报']
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						toolbox: {
							feature: {
								saveAsImage: {}
							}
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: xTime
						},
						yAxis: {
							type: 'value',
							axisLabel: {
								formatter: '{value} ' + dw
							}
						},
						series: [{
							name: "新增订单",
							areaStyle: {
								normal: {}
							},
							type: 'line',
							data: addsNum
						},{
							name: "支付订单",
							areaStyle: {
								normal: {}
							},
							type: 'line',
							data: payNum
						}]
					})
					this.chart2.setOption({
						color: ['#4cabce', '#e5323e'],
					    tooltip: {
					        trigger: 'axis',
					        axisPointer: {
					            type: 'shadow'
					        }
					    },
					    legend: {
					        data: ['Desert', 'Wetland']
					    },
					    toolbox: {
					        show: true,
					        orient: 'vertical',
					        left: 'right',
					        top: 'center',
					        feature: {
					            mark: {show: true},
					            dataView: {show: true, readOnly: false},
					            magicType: {show: true, type: ['stack', 'tiled']},
					            restore: {show: true},
					            saveAsImage: {show: true}
					        }
					    },
					    calculable: true,
						xAxis: {
							type: 'category',
            				axisTick: {show: false},
							data: xTime
						},
						yAxis: {
							type: 'value',
							axisLabel: {
								formatter: '{value}'
							}
						},
						series: [{
							name: "新增订单",
							type: 'bar',
							barGap: 0,
							data: addsNum
						},{
							name: "支付订单",
							type: 'bar',
							data: payNum
						}]
					})
				})
			},
			handleCurrentChange(val) {

				this.currentPage1 = val - 0; //当前页
				this.inputPage = val;
				var startTime;
				var endTime;
				if(this.stime != null && this.stime.length > 0) {
					startTime = formatDate(this.stime[0], 'yyyy-MM-dd');
					endTime = formatDate(this.stime[1], 'yyyy-MM-dd');
				} else {
					startTime = this.sDate;
					endTime = this.eDate;
				}
				axios.post("interface/count/dayPaper?", qs.stringify({
					startDate: startTime,
					endDate: endTime,
					pageNo: val
				})).then((res) => {
					this.tableLists = res.data.data.pageList; //list数据
					this.totals = res.data.data.page.totalRow; //总条数
					this.size = res.data.data.page.pageSize; //每页条数
					this.totalPage = res.data.data.page.totalPage; //总页数
				})
			},
			dateFormat: function(row, column) {
				var date
				if(row[column.property]) {
					date = new Date(parseInt(row[column.property]))
					date = formatDate(date, 'yyyy-MM-dd')
				}
				if(date == undefined) {
					return "";
				}
				return date;
			},
			showZX() {
				this.isc = true;
			},
			showZZ() {
				this.isc = false;
			},
			search() {

				var startTime;
				var endTime;
				if(this.stime != null && this.stime.length > 0) {
					startTime = formatDate(this.stime[0], 'yyyy-MM-dd');
					endTime = formatDate(this.stime[1], 'yyyy-MM-dd');
				} else {
					startTime = this.sDate;
					endTime = this.eDate;
				}
				this.load(1, startTime, endTime);
			},
			t_search(num) {
				this.stime = [];
				var mytime = new Date();
				var st = mytime.setDate(mytime.getDate() - num);
				st = new Date(st);
				st = formatDate(st, 'yyyy-MM-dd');
				var et = formatDate(new Date(), 'yyyy-MM-dd');
				this.stime.push(new Date(st))
				this.stime.push(new Date(et))
				console.log(this.stime);
				this.load(1, st, et);
			},
			FlowExcel() {
				var that = this;
				this.isDisabled = true;
				var startTime;
				var endTime;
				if(this.stime != '') {
					startTime = formatDate(this.stime[0], 'yyyy-MM-dd');
					endTime = formatDate(this.stime[1], 'yyyy-MM-dd');
				} else {
					var mytime = new Date();
					var st = mytime.setDate(mytime.getDate() - 7);
					st = new Date(st);
					st = formatDate(st, 'yyyy-MM-dd');
					var et = formatDate(new Date(), 'yyyy-MM-dd');
					startTime = st;
					endTime = et;
				}
				axios.get('/interface/count/excelDayPaper', {
					params: {
						"startDate": startTime,
						"endDate": endTime
					},
					responseType: 'arraybuffer'
				}).then((response) => {
					//创建一个blob对象,file的一种
					let blob = new Blob([response.data], {
						type: 'application/x-xls'
					})
					let link = document.createElement('a')
					link.href = window.URL.createObjectURL(blob)
					link.download = '销售日报.xls'
					link.click();
					that.isDisabled = false;
				})
			}
		}
	}
</script>

<style>

</style>